<template>
  <div class="page-data-auth-container">
    <el-row :gutter="20">
      <el-form ref="requestParam"
               :model="requestParam"
               label-width="80px">
        <!-- <el-col :span="8">
          <el-form-item label="部门类型">
            <el-select v-model="requestParam.dept_type"
                       class="sel-style"
                       placeholder="请选择">
              <el-option v-for="(option,index) in deptTypeList"
                         :key="index"
                         :value="option.value"
                         :label="option.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="岗位名称">
            <el-input v-model="requestParam.job_name"
                      placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8"
                class="search-opera">
          <el-button type="primary"
                     @click="onSearch">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-col> -->
        <el-col :sapn="8"
                class="add-button">
          <el-button type="primary"
                     @click="addPatchUser"
                     class="el-icon-plus">新增</el-button>
        </el-col>
        <el-col :span="24">
          <el-table :data="tableData"
                    height="600"
                    :header-cell-style="{ background: '#f5f5f5' }">
            <el-table-column type="index"
                             fixed
                             align="center"
                             label="序号">
            </el-table-column>
            <el-table-column prop="user_name"
                             align="center"
                             show-overflow-tooltip
                             label="姓名">
            </el-table-column>
            <el-table-column prop="company_name"
                             align="center"
                             show-overflow-tooltip
                             label="一级机构">
            </el-table-column>
            <el-table-column prop="power"
                             align="center"
                             show-overflow-tooltip
                             label="数据权限">
            </el-table-column>
            <el-table-column label="操作"
                             align="center"
                             fixed="right"
                             width="180px">
              <template slot-scope="scope">
                <el-button type="text"
                           @click="onSetDataAuth(scope.row)">权限设置</el-button>
                <el-button type="text"
                           @click="onDel(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>

        <el-col :span="24">
          <el-pagination @size-change="
                handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="requestParam.page"
                         :page-sizes="[10,20,30,40,50,100]"
                         class="pagination-style"
                         :page-size="requestParam.page_size"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-col>
      </el-form>
      <PageDataAuthDialog v-if="pageDataAuthVisible==true"
                          :objRow.sync="objRow"
                          :callBackFunc="callBackFunc"
                          :pageDataAuthVisible.sync="pageDataAuthVisible"></PageDataAuthDialog>
    </el-row>

    <!-- 新增用户 -->
    <AddUserDialog v-if="childDialog==true"
                   :callBack="callBack"
                   :childDialog.sync="childDialog"></AddUserDialog>

  </div>
</template>

<script>
import { standardCodeApi } from '@/services/StandardCode'
import { accountApi } from '@/services/CompanySetting'
import { backEvaluateApi } from '@/services/ProjectCenter'
import AddUserDialog from './components/AddUserDialog';//选择被评价人员
import { ProjectListApi } from "@/services/ProjectCenter";
import PageDataAuthDialog from './components/PageDataAuthDialog';
export default {
  components: {
    PageDataAuthDialog,//页面数据授权
    AddUserDialog,//新增用户
  },
  data () {
    return {
      deptTypeList: [],
      childDialog: false,
      objRow: {},
      pageDataAuthVisible: false,
      total: 0,
      tableData: [],

      requestParam: {
        job_name: '',
        dept_type: '',
        page: 1,
        page_size: 10,
        is_page: 1,
        // project_id: '',
      }
    }
  },
  methods: {
    callBackFunc () {//设置用户数据范围的回调函数
      this.handleCurrentChange(1);//刷新
    },
    callBack () {
      this.handleCurrentChange(1);//刷新
    },
    //organizationFramework
    // 获取组织类型
    getDeptType () {
      return standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'deptType'
        }
      }).then(res => {
        if (res.data) {
          this.deptTypeList = res.data.list;
          window.localStorage.setItem('plaDeptTypeList', JSON.stringify(this.deptTypeList));//部门类型
        }
      }).catch(error => {
        console.log(error)
      })
    },
    addPatchUser () {//新增用户
      this.childDialog = true;
    },
    onReset () {//重置
      this.requestParam = this.$options.data().requestParam;//重置
      this.onSearch();//查询 
    },
    onSearch () {//查询
      this.handleCurrentChange(1);//模糊查询
    },
    getPageDataAuth () {//页面数据授权
      backEvaluateApi.getDataAuth({
        params: this.requestParam
      }).then(res => {
        let data = res.data;
        if (data) {
          this.tableData = data.list;
          this.total = data.total_count;//总数
        }
      })
    },
    
    handleCurrentChange (val) {
      this.requestParam.page = val;
      this.getPageDataAuth();//页面数据授权数据
    },
    handleSizeChange (val) {
      this.requestParam.page_size = val;
      this.handleCurrentChange(1);
    },
    onSetDataAuth (row) {//权限设置
      this.objRow = Object.assign({}, row)
      this.pageDataAuthVisible = true;
    },
    delDataAuth (row) {//删除数据授权
      let obj = {}
      obj.user_ids = row.user_id;
      backEvaluateApi.delUser({//删除用户
        data: obj
      }).then((res) => {
        if (res.code == 0) {
          this.onSearch();//查询
          this.$message.success('删除成功!');
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    onDel (row) {//删除
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        left: true
      }).then(() => {
        this.delDataAuth(row);//删除数据授权
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    getProIds (proList) {
      let proId = '';
      let newArr = []
      if (proList.length > 0) {
        proList.map((item) => {
          newArr.push(item.project_id)
        });
        proId = newArr.join(',');//逗号分隔的项目id
      };
      return proId;
    }
  },
  watch: {
    '$store.state.choosedProjectList': {
      handler (newval) {
        let proList = newval.list;//飞轮选中的项目        
        this.requestParam.project_id = this.getProIds(proList);//项目的主键值更新
        this.handleCurrentChange(1);//刷新
      },
      deep: true
    },
    // '$store.state.choosedProject': function (val) {
    //   // this.choosedProject = val
    //   // this.project_id = val.project_id
    // }
  },
  async created () {
    let proList = this.$store.state.choosedProjectList;
    this.requestParam.project_id = this.getProIds(proList.list);//项目的主键值
    let plaDeptTypeList = window.localStorage.getItem('plaDeptTypeList');//部门类型
    if (plaDeptTypeList) {
      this.deptTypeList = JSON.parse(plaDeptTypeList);//组织类型
    } else {
      await this.getDeptType();//组织类型
    }
    await this.handleCurrentChange(1);//刷新
  }
}
</script>

<style lang="scss" scoped>
.page-data-auth-container {
  padding: 20px;
  .sel-style {
    width: 100%;
  }
  .search-opera {
    text-align: right;
  }
  .add-button {
    margin-bottom: 20px;
  }
}
</style>